import React from "react";
import {
  Card,
  Table,
  Space,
  Button,
  Select,
  DatePicker,
  Input,
  Typography,
  Row,
  Col,
} from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import styles from "./index.module.less";

const { Title } = Typography;
const { RangePicker } = DatePicker;
const { Search } = Input;

interface DefectData {
  key: string;
  defectId: string;
  title: string;
  project: string;
  severity: string;
  priority: string;
  handler: string;
  reporter: string;
  responsible: string;
  phase: string;
  source: string;
}

const DefectList: React.FC = () => {
  const columns = [
    {
      title: "缺陷编号",
      dataIndex: "defectId",
      key: "defectId",
    },
    {
      title: "标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "所属项目",
      dataIndex: "project",
      key: "project",
    },
    {
      title: "严重程度",
      dataIndex: "severity",
      key: "severity",
    },
    {
      title: "优先级",
      dataIndex: "priority",
      key: "priority",
    },
    {
      title: "当前处理人",
      dataIndex: "handler",
      key: "handler",
    },
    {
      title: "发现人",
      dataIndex: "reporter",
      key: "reporter",
    },
    {
      title: "责任人",
      dataIndex: "responsible",
      key: "responsible",
    },
    {
      title: "发现阶段",
      dataIndex: "phase",
      key: "phase",
    },
    {
      title: "缺陷来源",
      dataIndex: "source",
      key: "source",
    },
    {
      title: "缺陷处理",
      key: "action",
      render: () => (
        <Button type="link" data-oid="iwf_i39">
          建卡
        </Button>
      ),
    },
  ];

  const data: DefectData[] = [
    {
      key: "1",
      defectId: "1295881",
      title: "测试验证99",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
    },
    {
      key: "2",
      defectId: "1181992",
      title: "test33",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
    },
    {
      key: "3",
      defectId: "1182058",
      title: "test00",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "王杨智",
      reporter: "王杨智",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
    },
    {
      key: "4",
      defectId: "1182071",
      title: "缺陷流程测试-2023-05-18",
      project: "精益之星-电子看板20...",
      severity: "3-一般",
      priority: "2-正常",
      handler: "黄莉",
      reporter: "王宇壮",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
    },
    {
      key: "5",
      defectId: "1165996",
      title: "test",
      project: "精益之星-电子看板20...",
      severity: "5-建议及警告",
      priority: "2-正常",
      handler: "黄莉",
      reporter: "黄莉",
      responsible: "黄莉",
      phase: "联调自测阶段",
      source: "精益测试平台",
    },
  ];

  return (
    <div className={styles.container} data-oid="sxhili7">
      <div className={styles.header} data-oid="_gah4uk">
        <Title level={2} data-oid=":no0hzz">
          缺陷管理
        </Title>
        <Space size="middle" data-oid="4xdjr5x">
          <Select
            placeholder="选择项目"
            style={{ width: 200 }}
            options={[{ value: "project1", label: "精益之星-电子看板20..." }]}
            data-oid="7a0vg6h"
          />

          <Select
            placeholder="当前处理人"
            style={{ width: 200 }}
            options={[
              { value: "handler1", label: "王杨智" },
              { value: "handler2", label: "黄莉" },
            ]}
            data-oid="o:j0sdy"
          />

          <RangePicker style={{ width: 300 }} data-oid="uljyojp" />
          <Search
            placeholder="请输入编号/名称/处理人"
            style={{ width: 250 }}
            allowClear
            data-oid="yp7h6i6"
          />

          <Button
            type="primary"
            icon={<DownloadOutlined data-oid="1j1_8pt" />}
            data-oid="68h73m0"
          >
            导出
          </Button>
        </Space>
      </div>

      <Card className={styles.content} data-oid="y-cxhrx">
        <Table
          columns={columns}
          dataSource={data}
          pagination={{
            total: 5,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
          }}
          data-oid="8v:fa.4"
        />
      </Card>
    </div>
  );
};

export default DefectList;
